<template>
  <div class="tab-bar-item" @click="itemClick">
    <slot v-if="isActive" name="img-on"></slot>
    <slot v-else name="img"></slot>
    <div class="text" :class="{ red: isActive }">{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props: ["text", "url"],
  methods: {
    itemClick() {
      // 如果不是本页面处于活跃状态，就跳转
      if (this.$route.path.indexOf(this.url)) this.$router.push(this.url);
    },
  },
  computed: {
    isActive() {
      return !this.$route.path.indexOf(this.url);
    },
  },
};
</script>

<style scoped>
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
}

.tab-bar-item img {
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.text {
  font-size: 12px;
}

.red {
  color: red;
}
</style>
